<template>
  <div id="cryptos">
    <div id="financialOrder" class="financialOrder">
      <assets-head
          :title="$i18n.locale === 'CN' || $i18n.locale === 'zh-CN' ? data.name_cn : data.name_en"></assets-head>
      <div class="box-border  ">
        <div class="w-full h-1 bgDark"></div>
        <div class="mt-48 font-36 font-600 px-33 textColor">{{ $t('购买金额') }}</div>
        <div class="flex justify-center mt-17">
          <div class="flex">
            <input :placeholder="$t('输入金额')" v-model="form.amount" type="number"
                   class="h-98 pl-30 w-580 border-none text-grey inputBackground textColor" @input="changeMount">
            <div class="h-98 lh-98 w-180 flex inputBackground textColor" @click="form.amount = bal">
              {{ data.buyCurrency ? data.buyCurrency.toUpperCase() : '' }} <span class="colorMain pl-10">{{
                $t('全部')
              }}</span></div>
          </div>
        </div>

        <div class=" px-33">
          <div class="flex justify-between flex-row items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $t('可用余额') }}</div>
            <div class="font-31 font-400 textColor">{{ bal }}
              {{ data.buyCurrency ? data.buyCurrency.toUpperCase() : '' }}
            </div>
          </div>
          <div class="flex justify-between items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $t('数量限制') }}</div>
            <div class="font-31 font-400 textColor">{{ data.onSale }}</div>
          </div>
          <div class="flex justify-between items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $t('最少可投') }}</div>
            <div class="font-31 font-400 textColor">{{ data.investmentMin }}
              {{ data.buyCurrency ? data.buyCurrency.toUpperCase() : '' }}
            </div>
          </div>
          <div class="flex justify-between items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $t('最大可投') }}</div>
            <div class="font-31 font-400 textColor">{{ data.investmentMax }}
              {{ data.buyCurrency ? data.buyCurrency.toUpperCase() : '' }}
            </div>
          </div>
        </div>
        <div class=" h-28 px-33 mt-83 mb-22 textColor">{{ $t('概览') }}</div>
        <div class="px-33">
          <div class="flex justify-between items-center h-98">
            <div class="font-31 font-400 text-grey">{{ $t('购买日') }}</div>
            <div class="font-31 font-400 textColor">{{ dateBuy }}</div>
          </div>
          <div class="flex justify-between items-center h-98">
            <div class="font-31 font-400 text-grey">{{ $t('起息日') }}</div>
            <div class="font-31 font-400 textColor">{{ earnTime ? earnTime : '--' }}</div>
          </div>
          <div class="flex justify-between items-center h-98">
            <div class="font-31 font-400 text-grey">{{ $t('周期') }}</div>
            <div class="font-31 font-400 textColor">{{ data.cycle }}</div>
          </div>
          <div class="flex justify-between items-center h-98">
            <div class="font-31 font-400 text-grey">预计今日收益</div>
            <div class="font-31 font-400 textColor">{{ (data.investmentMin * (data.dailyRate / 100)).toFixed(2) }} - {{
                (data.investmentMax * (data.dailyRate / 100)).toFixed(2)
              }}&nbsp;{{
                data.outputCurrency ?
                    data.outputCurrency.toUpperCase() : ''
              }}
            </div>

          </div>
          <div>
            <Toast ref="toastRef"/>
          </div>

          <div @click="handleBuy" class="text-white btnMain h-98 lh-98 w-762 rounded-lg text-center">{{
              $t('购买')
            }}
          </div>
        </div>

      </div>


    </div>
  </div>
</template>

<script>
import {machineMakeOrder} from '@/service/financialManagement.api.js'
import assetsHead from '@/components/Transform/assets-head/index.vue';
import dayjs from 'dayjs'
import {_getBalance} from "@/service/user.api.js";
import Toast from '@/views/Toast.vue';

export default {
  name: "MachineBuy",
  components: {
    assetsHead,
    Toast
  },
  data() {
    return {
      bal: 0,
      earnTime: dayjs().format('YYYY-MM-DD HH:mm'),
      dateBuy: dayjs().format('YYYY-MM-DD HH:mm'),
      dividendTime: '',
      data: {},
      form: {
        minerId: '',
        amount: '',
        cycle: '',
        dailyRate: '',
        tasteInfo: ''
      },
    }
  },
  methods: {
    changeMount() {

    },
    handleBuy() {

      // if (!this.data.tasteInfo==0 && !this.form.amount) {
      //   // this.$toast(this.$t('请输入金额'))
      //   this.$refs.toastRef.show(this.$t('请输入金额'));
      //   return
      // } else if (this.data.tasteInfo==0 && this.form.amount == '') {
      //   this.form.amount = 10
      // }
      if (!this.form.amount) {
        this.$refs.toastRef.show(this.$t('请输入金额'));
      }
      if (this.form.amount * 1 < this.data.investmentMin) {
        this.$refs.toastRef.show(this.$t('最低金额') + ':' + this.data.investmentMin)
        return
      } else if (this.form.amount * 1 > this.data.investmentMax) {
        this.$refs.toastRef.show(this.$t('最大数量') + ':' + this.data.investmentMax)
        return
      }
      machineMakeOrder(this.form).then(data => {
        if (data.code == 1) {
          this.$refs.toastRef.show(this.$t('余额不足'))
        } else {
          this.$router.push({path: '/cryptos/machine-confirm', query: {obj: JSON.stringify(data)}})
        }

      })


    },
    //获取钱包余额
    getAvailable(symbol) {
      _getBalance().then((data) => {
        // let walletList = res.extends;
        // let initObj = walletList.find(item => {
        //   return item.symbol.toLowerCase() == symbol.toLowerCase()
        // })
        // this.bal = initObj.usable
        this.bal = data.money
      });
    },
  },
  created() {
    this.data = JSON.parse(this.$route.query.obj)
    this.getAvailable(this.data.buyCurrency || 'usdt')
    this.form.minerId = this.data.uuid
    this.form.cycle = this.data.cycle
    this.form.dailyRate = this.data.dailyRate
    this.form.tasteInfo = this.data.tasteInfo
    this.form.minerType = this.data.minerType
    // if (this.data.test) {
    //   this.form.amount = 0
    //   machineMakeOrder(this.form).then(res => {
    //     this.earn_time = res.earn_time
    //     console.log(res.earn_time)
    //   })
    // }
  }
}
</script>

<style lang="scss">
@import "@/assets/init.scss";

#cryptos {
  .financialOrder {
    width: 100%;
    box-sizing: border-box;
  }

  .wz {
    bottom: 44px;
    left: 32px;
    right: 32px;
  }
}
</style>
